<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自媒体申请入驻</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/layui/images/favicon.ico">
    <link rel="stylesheet" href="/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="/layui/css/themes/default.css" media="all">
    <link rel="stylesheet" href="/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <!--[if lt IE 9]-->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/layui/css/forget.css">
    <style>
        img[src=""],img:not([src]){
            opacity:0;
        }
    </style>
</head>
<body>
<!-- login/register container -->
<div class="container" style="height: 600px">
    <!-- register -->
    <div class="form-container sign-up-container">
        <form class="layui-form login-bottom">
            <div class="form" style="margin-top: 70px;margin-left: 190px">
                <h2>自媒体入驻申请</h2>
                <input type="text" name="accountName" id="accountName" placeholder="用户名">
                <input type="text" lay-verify="phone" name="phoneNum" id="phoneNum" placeholder="手机号">
                <div class="input" >
                    <table>
                        <tr>
                            <td>
                                <input style="width: 110px" type="Verification" name="Verification" id="Verification" placeholder="请输入验证码">
                            </td>
                            <td>
                                <button style="width: 160px; margin-left: 10px;" id="yanzheng">发送验证</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div style="font-size: 20px;margin-left: 20px">平&nbsp;台 &nbsp;：</div>
                            </td>
                            <td>
                                <select class="layui-select" name="platformId" id="platformId">
                                    <c:forEach items="${platform}" var="platform">
                                        <option value="${platform.platform.id}">${platform.platform.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <input type="text" name="productUrl" id="productUrl" placeholder="账号链接">
                            </td>
                            <td>
                                <input type="number" name="fansAmount" id="fansAmount" placeholder="粉丝总数(请输入纯数字)" style="margin-left: 10px">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" name="type" id="type" placeholder="类型（游戏、吃播）">
                            </td>
                            <td>
                                <input type="number" name="subsAmount" id="subsAmount" placeholder="访问总量(请输入纯数字)" style="margin-left: 10px">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div style="font-size: 20px;margin-left: 20px">头&nbsp;像 &nbsp;：</div>
                            </td>
                            <td>
                                <button type="button" class="layui-btn" id="test1" style="">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
                <img id="demo1" name="demo1" style="width: 40px;height: 40px;margin-left: 210px;margin-top: -40px;z-index: 1"/>
                <input type="password" name="password" id="password" placeholder="输入密码">
                <button class="login-btn" lay-submit="" id="sigup" lay-filter="forget">申请入驻</button>
            </div>
        </form>
    </div>

    <script src="/layui/js/forget.js"></script>
    <script>
        document.getElementById("fansAmount").addEventListener("input",function(event){
            event.target.value = event.target.value.replace(/-/g,"");
        });
    </script>
    <script>
    document.getElementById("subsAmount").addEventListener("input",function(event){
        event.target.value = event.target.value.replace(/-/g,"");
    });
    </script>
    <script src="/layui/js/login.js"></script>
    <script src="/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/layui/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script>
        layui.use(['form','upload','layer','element','jquery'], function () {
            var form = layui.form,
                layer = layui.layer,
                element = layui.element,
                upload = layui.upload,
                $ = layui.jquery;
            var cs = null;
            /*上传头像*/
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '/upload' //上传接口
                ,before:function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接 (base64)
                        cs = result;
                    });
                }
                ,done: function(res){
                }
                ,error: function(){
                    //请求异常回调
                }
            });
            // 登录过期的时候，跳出ifram框架
            if (top.location != self.location) top.location = self.location;

            $('.bind-password').on('click', function () {
                if ($(this).hasClass('icon-5')) {
                    $(this).removeClass('icon-5');
                    $("input[name='password']").attr('type', 'password');
                } else {
                    $(this).addClass('icon-5');
                    $("input[name='password']").attr('type', 'text');
                }
            });

            $('.icon-nocheck').on('click', function () {
                if ($(this).hasClass('icon-check')) {
                    $(this).removeClass('icon-check');
                } else {
                    $(this).addClass('icon-check');
                }
            });

            var btn = document.querySelector('#yanzheng');
            var time = 60; // 定义剩下的秒数
            btn.addEventListener('click', function() {
                btn.disabled = true;
                var timer = setInterval(function() {
                    if (time == 0) {
                        // 清除定时器和复原按钮
                        clearInterval(timer);
                        btn.disabled = false;
                        btn.innerHTML = '发送验证';
                    } else {
                        btn.innerHTML = time + '秒';
                        time--;
                    }
                }, 1000);

                var phoneNum = $("#phoneNum").val();
                if (phoneNum == null || phoneNum == ''){
                    layer.msg("请先输入手机号")
                    return false;
                }

                $.ajax({
                    url: '/fogetMassage2',
                    type: 'post',
                    data: 'phoneNum=' + phoneNum,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        if (result.code == '0'){

                        }
                        layer.msg(result.msg)
                    }
                });
                return false;
            })

            //校验验证码是否正确
            /*$('#yanzheng').click(function () {

            })*/
            // 媒体主申请入驻操作
            form.on('submit(forget)', function (data) {
                data = data.field;
                if (data.accountName == '') {
                    layer.msg('请输入用户名');
                    return false;
                }
                if (data.phoneNum == '') {
                    layer.msg('请输入手机号');
                    return false;
                }
                if (data.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (data.fansAmount == '') {
                    layer.msg('粉丝总数不能为空');
                    return false;
                }if (data.subsAmount == '') {
                    layer.msg('访问量不能为空');
                    return false;
                }
                if (data.type == '') {
                    layer.msg('类型不能为空');
                    return false;
                }if (data.productUrl == '') {
                    layer.msg('账号链接不能为空');
                    return false;
                }if (cs == '' || cs == null) {
                    layer.msg('请先上传头像');
                    return false;
                }
                var accountName = $("#accountName").val();
                var phoneNum = $("#phoneNum").val();
                var platformId = $("#platformId").val();
                var productUrl = $("#productUrl").val();
                var fansAmount = $("#fansAmount").val();
                var type = $("#type").val();
                var accountPv = $("#subsAmount").val();
                var password = $("#password").val();
                $.ajax({
                    url: '/media/register2',
                    type: 'post',
                    data: {"accountName":accountName, "phoneNum":phoneNum, "platformId":platformId,
                    "url":productUrl,"fansAmount":fansAmount,"type":type,"accountPv":accountPv
                    ,"password":password,"headImg":cs},
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == '0') {
                            layer.msg('成功申请入驻，等待管理员审核')
                            setTimeout("window.location = '/user/openLogin'",900);
                        } else {
                            layer.msg(result.msg);
                            return false;
                        }
                    }
                });
                return false;
            });
        });
    </script>
</div>
</body>
</html>
